<template>
  <div class="value-manage-paeg">
    <el-card class="box-card" style="width: 100%; border: none;" shadow="never">
      <el-row :gutter="20" class="num-card">
        <el-col :span="8">
          <div class="item">
            <span>累计交易操作</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>累计入金</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>累计出金</span>
            <p>12312.0012</p>
            <em />
          </div>
        </el-col>
      </el-row>

      <el-form :inline="true" label-position="top" :model="searchForm" class="demo-form-inline">

        <el-form-item label="会员UID" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="会员UID" />
        </el-form-item>

        <el-form-item label="会员手机" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="会员手机" />
        </el-form-item>
        <el-form-item label="交易号/关联单号" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="交易号/关联单号" />
        </el-form-item>
        <el-form-item label="类型" size="small" style="margin-right: 20px">
          <el-select v-model="searchForm.datetime" placeholder="请选择">
            <el-option
              v-for="item in [{
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }, {
                value: '选项3',
                label: '蚵仔煎'
              }]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="IP地址搜索" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="IP地址搜索" />
        </el-form-item>
        <el-form-item label="查询时间" size="small" style="margin-right: 20px">
          <el-date-picker
            v-model="searchForm.datetime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="操作" size="small">
          <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="width: 100%; border: none; margin: 20px 0;" shadow="never">
      <div>
        <el-button icon="el-icon-coordinate" size="small" type="primary" @click="()=>{editVisible = true}">操作音值</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData.filter(data => data.name.toLowerCase())"
        style="width: 100%; margin-top: 20px"
        stripe
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />

        <el-table-column
          label="会员UID"
          prop="date"
        />
        <el-table-column
          label="会员手机"
          prop="name"
        />
        <el-table-column
          label="待划转音值"
          prop="name"
        />
        <el-table-column
          label="音值"
          prop="name"
        />
        <el-table-column
          label="音波"
          prop="name"
        />

        <el-table-column
          label="冻结音波"
          prop="name"
        />

        <el-table-column
          label="今日买入音值"
          prop="name"
        />

        <el-table-column
          label="今日卖出音值"
          prop="name"
        />

        <el-table-column
          label="信用度"
          prop="name"
        />

        <el-table-column
          label="身份证号"
          prop="name"
        />

        <el-table-column
          label="状态"
          prop="name"
        />

        <el-table-column
          label="注册时间"
          prop="name"
        />

        <el-table-column
          label="最后登录时间"
          prop="name"
        />

        <el-table-column
          label="登录IP"
          prop="name"
        />

        <el-table-column
          label="常用地"
          prop="name"
        />
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        style="margin-top: 20px"
      />
    </el-card>

    <el-dialog title="操作音值" width="520px" :before-close="(dong)=>{editForm.resData= null; dong();}" :close-on-click-modal="false" :visible.sync="editVisible">
      <el-form size="small" :model="editForm" label-width="120px">

        <el-form-item label="会员UID/手机号">
          <el-input v-model="editForm.id" placeholder="会员UID" style="width: 240px" />
          <el-button icon="el-icon-search" type="primary" @click="editForm.resData = 1" size="small" style="margin-left: 20px">搜索</el-button>
        </el-form-item>

        <div v-if="editForm.resData" style="margin-top: 10px;">
          <el-form-item label="会员姓名">
            赵日天
          </el-form-item>

          <el-form-item label="类型">
            <el-radio-group v-model="editForm.id">
              <el-radio :label="1">增加</el-radio>
              <el-radio :label="2">减少</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="音值">
            <el-input-number v-model="editForm.id" :precision="4" controls-position="right" :min="1" placeholder="请输入币价" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </div>

      </el-form>

    </el-dialog>

  </div>
</template>

<script>

export default {
  name: 'ValueManage',
  data() {
    return { pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now()
      },
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date())
        }
      }, {
        text: '昨天',
        onClick(picker) {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24)
          picker.$emit('pick', date)
        }
      }, {
        text: '一周前',
        onClick(picker) {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', date)
        }
      }]
    },
    searchForm: {
      datetime: ''
    },
    tableData: [{
      id: 1,
      name: '123'
    }
    ],
    editForm: {
      id: '',
      resData: null
    },
    multipleSelection: [],
    editVisible: false
    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    // 搜索查询
    searchSubmit() {
      alert('搜索')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped>
	@import './style.scss';
</style>
